<script setup lang="ts">
import {reactive} from 'vue'
var top_text='<h3>张三</h3>';
const data=reactive([
{"id":3,"name":"懒人小沙发","describe":"舒适休闲，完善支撑","price":126.4,"isHot":1}, 
{"id":4,"name":"减压弹力球","describe":"释放压力，放松身心","price":95.2}, 
{"id":5,"name":"简约一字发夹","describe":"简约设计，百搭款式","price":15.9}, 
{"id":6,"name":"毛线小兔子耳朵发夹","describe":"可爱萌趣，精致做工","price":12.7}, 
{"id":6,"name":"华为畅享 60X","describe":"7000mA 大电池鸿蒙系统","price":688,"isHot":1}
]);

</script>
<template>
    <div class="top">
        <input type="text" placeholder="搜一搜"><button>确定</button>
         <div class="top_h3" v-html="top_text"></div>
    </div>
   <h1 class="list_tit">商品列表</h1>
    <div class="list">
        <div class="list_ul">
            <div class="list_li">
                <div class="li_img">商品图片</div>
                <p v-text="data[0].name"></p>
                <span v-text="data[0].describe"></span>
                <h3>{{ data[0].price }} <span class="isHot">热销</span></h3>
            </div>
        </div>
    </div>
</template>
<style scoped>
.top{
height: 53px;
background: #333;
display:flex;
justify-content:center;
align-items:center;
}
.top input{
display:block;
padding-left: 5px;
color: #666;
width: 150px;
height:32px;
border-radius: 10px;
}
.top button{
display:block;
padding-left: 5px;
color: #666;

width: 60px;
height: 35px;
border-radius: 10px;
border:none;
}
.top_h3{
width:1080px;
font-weight:100;
line-height:53px;
color:#f2f2f2;
text-align: end;
}
.list_tit{
    text-align: left;
width:1280px;
margin:30px auto 50px;
}
.list{
width:100%;
display: flex;
justify-content:center;
}
.list_ul{
width:1280px;
height:300px;
display: flex;
flex-wrap: wrap;
justify-content:flex-start;
align-items:center;
}
.list_li{
position: relative;
width: 300px;
border-radius: 5px;
height: 120%;
text-align: left;
overflow: hidden;
margin: 0 18px 20px 0;
}
.li_img{
width:100%;
height:200px;
text-align:center;
line-height:200px;
background:#ABE1CC;
}
.list_li p{
font-size:18px;
line-height:30px;
}

.list_li span{
display:block;
font-size:14px;
color:#888;
}
.list_li h3{
font-size:28px;
color:#CF4444;
line-height:60px;
}
.list_li .isHot{
position: absolute;
width: 50px;
height: 30px;
text-align:center;
line-height:30px;
background:#CF4444;
border-radius: 10px;
bottom: 30px;
right: 10px;
color: yellow;
font-family:"宋体"
}
</style>